<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模板字符串</title>
  </head>
  <body>
    <script>
      // ES6推出的 字符串语法

      // 传统的字符串 用 ' '  或 " "
      var ename = 'MIKE'
      // var ename = "MIKE"

      // 为什么字符串有两种写法: 单双引号?
      // 方便嵌套:
      var word = '他今天累"死"了'
      var word = "I'm fine!"

      // 转义符: \  去掉字符串内容中 特殊符号的特殊含义
      var word = ' He said: "I\'m fine!" '

      // 随着JS与HTML 的互动增多: 新的场景-- 拼接字符串
      var emp = { name: '亮亮', age: 19 }
      // 拼接到HTML里, 显示 亮亮今年19岁
      // 旧版本中, 只能用 + 拼接片段, 很繁琐
      var h = '<div><a>' + emp.name + '</a>今年<b>' + emp.age + '</b>岁</div>'
      console.log(h)

      // 模板字符串:  模板--template  特指HTML
      // 定界符: 反引号`
      // ${} : 在模板字符串中书写JS代码
      var h = `<div><a>${emp.name}</a>今年<b>${emp.age}</b>岁</div>`
      console.log(h)

      // 模板字符串支持换行
      var h = `
      <ul>
        <li>亮亮</li>
        <li>小新</li>
      </ul>
      `
      console.log(h)
    </script>
  </body>
</html>
